<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/10/27
  Time: 21:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>SCL心理健康试题页面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/sclIndex.css">
    <script src="${pageContext.request.contextPath}/static/jquery-3.6.1.min.js"></script>
</head>
<body>
    <!-- 头部 -->
    <div id="head">
            <h3><p id="p1">症状自评量表SCL-90</p></h3>
            <p id="p2">
                指导语：
                <br>仔细阅读每一条，根据自己最近一星期内的感觉，在相应的方格内划一个“√”。
                <br>必须逐条填写不可遗漏，每一项只能划一个“√”，不能划两个或更多。
            </p>
    </div>
    <div id="nav">最近30天测试：410313人</div>

    <!-- 选项 -->
    <div id="options">

        <div>
            <span id="curr">01</span>/
            <span id="totalnum">${allsub.total}</span>
        </div>

        <!-- 进度条 开始 -->
        <div>
            <div></div>
        </div>
        <!-- 进度条 结束-->

        <!-- 存放题目的 -->
        <div>
            <!-- 题目开始 -->
            <c:forEach items="${allsub.list}" var="s" varStatus="d">
                <%-- 题目 --%>
                <span class="tm">
                    <%-- 标题 --%>
                    <p>
                        <a>${s.sclnumber}</a>.${s.scltitle}
                    </p>

                    <!-- 选项开始 -->
                    <div>
                        <%--试题编号--%>
                        <span style="display: none;" name="sclnumber">${s.sclnumber}</span>
                            <%-- 试题选项 --%>
                            <ul class="xx">
                                <li value="1">${s.xx1}</li>
                                <li value="2">${s.xx2}</li>
                                <li value="3">${s.xx3}</li>
                                <li value="4">${s.xx4}</li>
                                <li value="5">${s.xx5}</li>
                            </ul>
                        <%--序号开始--%>
                        <c:if test="${d.first}">
                            <input type="button" class="nextbutton" value="下一题" onclick="nextSub()"/>
                        </c:if>
                        <%--序号末尾--%>
                        <c:if test="${d.last}">
                            <input type="button" class="previousbutton" value="上一题" onclick="prevSub()"/>
                            <input type="button" class="nextbutton" value="提交" onclick="tijiao()"/>
                        </c:if>
                        <c:if test="${!d.first and !d.last}">
                            <div style="width: 500px">
                            <input type="button"  class="previousbutton" value="上一题" onclick="prevSub()"/>
                                <input type="button" class="nextbutton" value="下一题" onclick="nextSub()"/>
                            </div>
                        </c:if>
                    </div>
                    <!-- 选项结束 -->

                </span>

                <!-- 题目结束 -->
            </c:forEach>
        </div>
    </div>
    <!-- 底部 -->
    <div id="bottom">
        <p id="bottomp1">
            不明白的地方可以举手问老师。
            回答时间没有限制。但不要过分考虑，请写出你最初想到的答案。
        </p>
        <p id="aaa">ღ๑AAA心理健康测试๑ღ</p>
    </div>

<script>
        var i=0;// 试题的索引 默认设置为0
        var j=1;// 进度条上的第几题
        var chackOption=[]; // 选中的数据
        var totalsub=Number($("#totalnum").text());//获取试题的总数
        var recordid=localStorage.getItem("recordid");//获取测试人的id

        $(function(){
            changeStyle();// 只显示索引i对应的试题

            //悬浮添加样式
            $(".xx").children("li").hover(function(){
                $(this).css("background-color","green");
            },function(){
                $(this).css("background-color","");
            })
            //当点击选项的时候自动给切换到下一个题目
            $(".xx").children("li").click(function(){
                // 如果是最后一道题就不能点击了
                // 进度条的值加1
                if(j<totalsub){
                    j++;
                    changeJinduTiao("+");// 更改进度条  进度条+
                }

                // 将对那个的数据存到集合里面
                var checkobj={};
                // 获取当前的兄弟标签input
                var sclnumber=$(this).parent(".xx").prev().text();// 获取试题的编号
                //alert(sclnumber)
                var sclanswer=$(this).val();// 获取对应的答案
                //alert(sclanswer)
                checkobj["sclnumber"]=sclnumber;
                checkobj["sclanswer"]=sclanswer;
                checkobj["recordid"]=recordid;
                //alert(sclnumber+"---"+sclanswer+"===="+JSON.stringify(checkobj));
                chackOption[i]=checkobj; // 将对应的试题和自己选择的答案放到chackOption中
                $(".xx").children("li").css("background-color","");
                $(this).css("background-color","orange");
                // 相当于是后台里面的application    sessionlocalStorage
                // setItem("","")
                localStorage.setItem("checkdata",JSON.stringify(chackOption));// 将chackOption中的值存放道localStorage中
                if(i==(totalsub-1)){
                    alert("已经是最后一道题了");
                    return ;
                }
                i++;// 索引值加一
                changeStyle();// 更改显示的试题
            })
        })

        /*
            改变显示题目的状态
         */
        function changeStyle(){
            localStorage.setItem("checkdata",JSON.stringify(chackOption));
            $(".tm").css("display","none");
            $(".tm")[i].style.display="block";
            changeBgColor();
        }

        /**
         * 更改进度条上面的题号 与 进度条进度 的方法
         */
        function changeJinduTiao(fh){
            if(j<10){
                $("#curr").html("0"+j);
            }else{
                $("#curr").html(j);
            }
            var oldwidth=$("#options div:nth-of-type(2) div").css("width").slice(0,-2);
            var newwidth=0;
            if(fh=='+'){
                newwidth=Number(oldwidth)+7
            }else{
                newwidth=Number(oldwidth)-7
            }
            $("#options div:nth-of-type(2) div").css("width",newwidth+"px");
        }

        /*
        *上一题的按钮
         */
        function prevSub(){
            i--;
            j--;
            changeJinduTiao("-");
            changeStyle();
        }
        /**
         * 下一题的按钮
         */
        function nextSub(){
            i++;
            j++;
            changeJinduTiao("+");
            changeStyle();
        }

        /**
         * 更改背景颜色
         */
        function changeBgColor(){
            //如果之前已经做过这个题目了就展示之前的结果  否则直接就展示下一题
            //集合中的数据拿出来并选中  之前已经选中的那个li
            var allData=JSON.parse(localStorage.getItem("checkdata"));
            var checkData=allData[i];
            if(checkData!='undefined'&&checkData!=null&&checkData!=''){
                var sclanswer=checkData.sclanswer;
                var sclnumber=checkData.sclnumber;
                // 找到答案为answer的选中
                // 找到span的text为sclnumber的然后显示
                var aaa=$($(".tm")[i]).children().find(".xx").children();
                aaa.each(item=>{
                    $(aaa[item]).css("background-color","");
                    // item是一个数字
                    var sclanswer1=aaa[item].value;
                    if(sclanswer==sclanswer1){
                        $(aaa[item]).css("background-color","orange");
                    }
                })
            }
        }

        /**
         * 提交试题的记录
         */
        function tijiao(){
            // 将数据插入到数据库中
            var data= localStorage.getItem("checkdata");
            // 判断是不是有空的  如果有空的就提示 需要做完题目
            var newData=JSON.parse(data);

            var notcheck=[];
            if(totalsub!=newData.length){

                alert("题没有做完！！！");
                return;
            }else{
                // 如果长度一样  里面有null 也提示题目没有做完
                newData.forEach(function (item,index){
                    if(item==null){
                        notcheck.push((index+1)+"");
                        // alert("第"+(index+1)+"题没有做完！！！");
                        // return;
                    }
                })
                if(notcheck.length!=0){
                    alert("您"+notcheck.toString()+"道题没有做！！！！");
                    return;
                }
            }
            //alert(data)
            //   如果传递到后台是一个json字符串
            //  contentType: 'application/json;charset=utf8',
            //
            $.ajax({
                url:"${pageContext.request.contextPath}/tSclRecordDetails/addRecordDetails",
                type:"post",
                data:data,
                contentType: 'application/json;charset=utf8',
                success:function (d){
                    if(d.data==true){
                        localStorage.clear();// 清除localstorage中的值
                        window.location="${pageContext.request.contextPath}/front/scllogin.jsp"
                    }
                }
            });
            //alert("提交到数据库！！！")
        }
</script>
</body>
</html>